<template>
  <div>
    <h1>App{{ count }}</h1>
    <button @click="count++">count累加</button>
    <hr />
    <Content></Content>
  </div>
</template>

<script>
import Content from "@/components/Content";
export default {
  name: "App",
  components: {
    Content,
  },
  data() {
    return {
      count: 0,
    };
  },
  //provide配置项:主要是为了向后代组件提供数据,key写成对象或函数的方式(推荐使用函数的方式)
  provide() {
    //provide函数内部return 的对象中的属性 就是提供的数据
    return {
      //provide提供的数据默认是没有响应式的,我们可以提供函数,函数内部调用后返回对应的数据,此时后代组件每次使用数据的时候调用函数就有响应式了
      count: () => this.count,
    };
  },
};
</script>

<style>
</style>